<template>
  <div>
    <div id="charts_line" style="height: 500px"></div>
  </div>
</template>
<script>
export default {
  methods: {
    initCharts() {
      var chart = Highcharts.chart("charts_line", {
        title: {
          text: "江苏疫情发展趋势",
        },
        subtitle: {
          text: "数据来源：thesolarfoundation.com",
        },
        yAxis: {
          title: {
            text: "就业人数",
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: [
          {
            name: "治愈人数",
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
          },
          {
            name: "感染人数",
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
          }
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      });
    },
  },
  mounted() {
    // 在页面加载出来的时候开始渲染图表
    this.initCharts();
  },
};
</script>